<template>
  <div class="login">
    <div class="loginBox">
      <h3>登录</h3>
      <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
      <el-input placeholder="请输入密码" v-model="user.password"></el-input>
      <el-button type="primary" style="width: 80%" @click="login"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { adminLogin } from "../../request/api";
import { successAlert, errorAlert } from "../../utils/alert";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    ...mapActions({
      userActions: "userActions",
    }),
    login() {
      if (this.user.username !== "" && this.user.password !== "") {
        adminLogin(this.user).then((res) => {
          if (res.code === 200) {
            this.userActions(res.list);
            successAlert(res.msg);
            this.$router.push("/index");
          }
        });
      } else {
        errorAlert("请输入用户名和密码");
      }
    },
  },
   mounted(){
       document.title=this.$route.meta.title
  }
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #553443, #2f3d60);
}
.loginBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
}
h3 {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
/deep/ .el-input__inner {
  width: 80%;
  height: 30px;
  margin-bottom: 20px;
}
</style>